<template>
  <!-- 第三行数据 -->
  <div class="app-box">
    <div style="flex: 0 1 50%">
      <dv-border-box-8 style="width: 100%; height: 300px">
        <LineChart :typeChart="typeChart" />
      </dv-border-box-8>
    </div>
    <div style="flex: 0 1 25%">
      <dv-border-box-13 style="width: 100%; height: 300px"
        ><dv-active-ring-chart :config="config5" style="100%;height:300px"
      /></dv-border-box-13>
    </div>
    <div style="flex: 0 1 25%">
      <dv-border-box-8 style="width: 100%; height: 300px"
        > <capsule-data :echartData="echartData1" :colors="['#156def']" /></dv-border-box-8
      >
    </div>
  </div>
</template>

<script>
import capsuleData from "./capsuleData.vue";
import LineChart from "./lineChart.vue";
export default {
  components: {
    LineChart,
    capsuleData
  },
  name: "MoudleThree",
  data() {
    return {
      typeChart: "line",
      config5: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
        ],
      },
       echartData1: [
        {
          name: "No1 起重机",
          value: 100,
        },
        {
          name: "No2 物流提升机",
          value: 200,
        },
        {
          name: "No2 物流提升机",
          value: 300,
        },
        {
          name: "No3 物流提升机",
          value: 400,
        },
        {
          name: "No4 物流提升机",
          value: 500,
        },
        {
          name: "No5 物流提升机",
          value: 600,
        },
        {
          name: "No6 物流提升机",
          value: 600,
        },
        {
          name: "No7 物流提升机",
          value: 600,
        },
        {
          name: "No7 物流提升机",
          value: 600,
        },
        {
          name: "No7 物流提升机",
          value: 600,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped></style>
